<template>
	<view>
		<view class="header_bt_01">
			<image :src="userinfo.userImg" class="hander_tx"></image>
			<uni-search-bar class="uni-mt-10" style="color: #f3f3f3;" bgColor="#F8F8F8" radius="100"
				placeholder="搜索相关内容" clearButton="auto" cancelButton="auto" @confirm="search" />
		</view>
		<view class="Run_1" style="margin-top: 120rpx;border-radius: 200rpx;">
			<view class="Run_1_1" :class="GreadId===0?'head_Gle':''" @click="OnquAndmai(0)">
				<text class="Run_2">全部</text>
			</view>

			<view class="Run_1_2" :class="GreadId===1?'head_Gle':''" @click="OnquAndmai(1)">
				<text class="Run_3">东区</text>
			</view>
			<view class="Run_1_2" :class="GreadId===2?'head_Gle':''" @click="OnquAndmai(2)">
				<text class="Run_3">中区</text>
			</view>
			<view class="Run_1_2" :class="GreadId===3?'head_Gle':''" @click="OnquAndmai(3)">
				<text class="Run_3">西区</text>
			</view>
		</view>
		<view style="margin-top: 115rpx;" >
			<!-- 相关内容 -->
			<uni-group mode="card" v-for="(item,i) in RunOrdertListL" :key="i" v-if="GreadId===0?item.Range==='东区' || item.Range==='中区' || item.Range==='西区':GreadId===1?item.Range==='东区':GreadId===2?item.Range==='中区':GreadId===3?item.Range==='西区':''">
				<view class="uni_bottor_xz">
					<!--闲置模块内1功能区 -->
					<view class="uni_bottor_xz_1">
						<!--闲置模块内2功能区 头像 昵称 时间 购买 -->
						<view class="uni_bottor_xz_2">
							<!--头像 -->
							<image :src="item.userImg" class="uniBt_tx"></image>
							<!--昵称 -->
							<text class="uniBt_Name">{{ item.userName }}</text>
							<!--发布时间 -->
							<text class="uniBt_Time">{{ item.Ftime }}</text>
							<!--右侧按钮 -->
							<button class="uniBt_but" type="warn" size="mini" @click="RunOrder(item)">接单</button>
						</view>
					</view>
				</view>
				<!-- 快递接单界面 -->
				<uni-group mode="card" top=60>
					<!-- 帮我取 帮我买-->
					<view class="uni_bottor_xz_4">
						<!--闲置模块内55 功能区 标题 介绍 右侧图片 价格 -->
						<view style="height:240rpx;">
							<text class="nuiBt_title">{{ item.title }}</text>
							<text class="nuiBt_title_min"><text style="color: black;">送达时间：</text>{{ item.Pick_uptime }}</text>
							<view style="padding: 5px;position: absolute;top: 30px;" v-if="item.type2===1">
								<image class="uniBt_dd1"
									src="http://124.222.72.174:8008/images/动态区快递接单-Order_receiving/橙点.png"></image>
								<text class="uniBt_address1">取件地址</text>
								<text class="uniBt_address1_1">{{ item.qtext }}</text>
							</view>
							<view style="padding: 5px;position: absolute;top: 30px;" v-else-if="item.type2===2">
								<image class="uniBt_dd1"
									src="http://124.222.72.174:8008/images/动态区快递接单-Order_receiving/橙点.png"></image>
								<text class="uniBt_address1">物品信息</text>
								<text class="uniBt_address1_1">{{ item.qtext }}</text>
							</view>
							<view style="padding: 5px;position: absolute;top: 30px;">
								<image class="uniBt_dd2"
									src="http://124.222.72.174:8008/images/动态区快递接单-Order_receiving/绿点.png"></image>
								<text class="uniBt_address2">收件地址</text>
								<text class="uniBt_address2_2">{{ item.stext }}</text>
							</view>
							<text class="nuiBt_Picer">酬金{{ item.price }}元</text>
						</view>
					</view>
				</uni-group>
			</uni-group>
		</view>	
		<view style="padding:5px 0px 20px 0px;" v-if="Fwsum>=3">
			<uni-load-more color="#007AFF" :status="status" iconType="auto" />
		</view>
		<view style="height: 50px;">
		
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			// 将 m_user 模块中的 userinfo 映射到当前页面中使用
			...mapState('m_user', ['userinfo']),
		},
		data() {

			return {
				GreadId: 0, //0 全部 1 寻找 2 拾取
				RunOrdertListL: [], //跑腿订单
				status: 'more',//动态加载状态
				pageNum: 1,//当前加载页数
				Fwsum:0,//计算区域内订单的数里


			};
		},
		onLoad() {
			this.loadSJ()
			this.Fwsum=this.RunOrdertListL.length
		},
		methods: {
			loadSJ() {
				this.RunOrdertListL.push({
					no: "159862158888",
					userImg: "http://124.222.72.174:8008/images/头像/头像2.jpg",
					userName: "一笑很倾城",
					Ftime: "2022年4月9日 12:14",
					type: 1, //类型1 接单
					type2: 1, // 1代取 2帮买
					title: "跑腿-快递代取-东区",
					Pick_uptime:'立即上门',//取件时间
					Range: '东区',
					qtext: "学校菜鸟驿站包裹取件码编号1000-13-2910，请及时取件。",
					stext: "福州大学至诚学院中二405",
					price: "￥5.00"
				}, {
					no: "159862158888",
					userImg: "http://124.222.72.174:8008/images/头像/头像2.jpg",
					userName: "一笑很倾城",
					Ftime: "2022年4月9日 12:14",
					type: 1, //类型1 接单
					type2: 2, // 1代取 2帮买
					title: "跑腿-商品代买-西区",
					Pick_uptime:'10:00-11:00',//取件时间
					Range: '西区',
					qtext: "泡面可乐6瓶啤酒。",
					stext: "福州大学至诚学院中二405",
					price: "￥5.00"
				}, {
					no: "159862158888",
					userImg: "http://124.222.72.174:8008/images/头像/头像2.jpg",
					userName: "一笑很倾城",
					Ftime: "2022年4月9日 12:14",
					type: 1, //类型1 接单
					type2: 2, // 1代取 2帮买
					title: "跑腿-商品代买-中区",
					Pick_uptime:'12:00-13:00',//取件时间
					Range: '中区',
					qtext: "泡面可乐6瓶啤酒。",
					stext: "福州大学至诚学院中二405",
					price: "￥5.00"
				})
			},
			//导航栏切换不同范围
			OnquAndmai(val) {
				this.GreadId = val
				//计算某个范围内订单的数里
				this.Fwsum=0
				this.RunOrdertListL.forEach((item,value,arr)=>{
					if(val===0){
						this.Fwsum++
					}else if(item.Range==="东区" && val===1){
						this.Fwsum++						
					}else if(item.Range==="中区" && val===2){
						this.Fwsum++
					}else if(item.Range==="西区" && val===3){
						this.Fwsum++
					}
				})
			},
			//接单按钮
			RunOrder(item){
				console.log(item)
			},
			//动态加载
			getmo(){
				this.RunOrdertListL.push({
					no: "159862158888",
					userImg: "http://124.222.72.174:8008/images/头像/头像2.jpg",
					userName: "一笑很倾城",
					Ftime: "2022年4月9日 12:14",
					type: 1, //类型1 接单
					type2: 1, // 1代取 2帮买
					title: "跑腿-快递代取-东区",
					Pick_uptime:'立即上门',//取件时间
					Range: '东区',
					qtext: "学校菜鸟驿站包裹取件码编号1000-13-2910，请及时取件。",
					stext: "福州大学至诚学院中二405",
					price: "￥5.00"
				})
			}
		},
		onReachBottom() {
			console.log("触底啦")
			this.status = 'loading'
			const that = this;
			setTimeout(function() {
				that.pageNum++,
					that.getmo()
			}, 1000);
		
		},

	}
</script>

<style lang="scss">
	//头部样式
	.header_bt_01 {
		height: 115rpx;
		background-color: #FFFFFF;
		border-bottom: 2px solid #F7F7F7;

	}

	//头部样式--头像
	.hander_tx {
		width: 90rpx;
		height: 90rpx;
		border-radius: 100px;
		margin: 0px 0px 0px 8px;
	}

	//头部样式--取消字体 白色
	/deep/ .uni-searchbar__cancel {
		padding-left: 10px;
		line-height: 36px;
		font-size: 14px;
		color: #f3f3f3;
	}

	//顶部导航栏
	.Run_1 {
		border-width: 0px;
		position: absolute;
		left: 24rpx;
		top: 0px;
		width: 700rpx;
		height: 80rpx;
		display: flex;
		background-color: #FFFFFF;
		text-align: center;
	}

	.Run_1_1,
	.Run_1_2 {
		width: 325rpx;
	}

	//顶部导航栏 文本样式
	.Run_2,
	.Run_3 {
		font-size: 20px;
		font-family: "微软雅黑";
		height: 80rpx;
		line-height: 80rpx;
	}

	.head_Gle {
		background-color: rgba(81, 211, 211, 1);
		border-radius: 50rpx;
		font-family: "微软雅黑";
		color: seashell;
		font-weight: 700;
		font-style: italic;
		letter-spacing: normal;
		box-shadow: 5px 10px 20px #51d3d3;
	}

	//底部校园状态样式
	.uni_bottor_xz_2 {
		position: relative;
	}

	//头像
	.uniBt_tx {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 84rpx;
		height: 82rpx;
		border-radius: 100px;
	}

	//昵称
	.uniBt_Name {
		border-width: 0px;
		position: absolute;
		left: 116rpx;
		top: 12rpx;
		width: 300rpx;
		height: 54rpx;
		display: flex;
		font-family: '仿宋 Bold', '仿宋';
		font-weight: 700;
		font-style: normal;
		font-size: 16px;
	}

	//时间
	.uniBt_Time {
		border-width: 0px;
		position: absolute;
		left: 116rpx;
		top: 66rpx;
		width: 400rpx;
		height: 50rpx;
		display: flex;
		color: #A8A5A5;
		font-size: 13px;
	}

	//按钮
	.uniBt_but {
		border-width: 0px;
		position: absolute;
		left: 452rpx;
		top: 23rpx;
		width: 202rpx;
		height: 56rpx;
		background: inherit;
		background-color: rgba(217, 0, 27, 0.682352941176471);
		border: none;
		border-radius: 14px;
	}

	//内部2 
	.uni_bottor_xz_4 {
		position: relative;
	}

	//标题
	.nuiBt_title {
		border-width: 0px;
		//position: absolute;
		left: 52rpx;
		top: 160rpx;
		width: 300rpx;
		height: 34rpx;
		display: flex;
		font-size: 16px;
		padding: 5px;
	}

	//内容
	.nuiBt_text {
		//position: absolute;
		left: 52rpx;
		top: 220px;
		width: 378rpx;
		height: 220rpx;
		font-size: 13px;
		display: inline-block;
		font-family: "微软雅黑";
		padding: 5px;
	}

	//右侧图片
	.nuiBt_img {
		border-width: 0px;
		position: absolute;
		left: 380rpx;
		top: 10px;
		width: 190rpx;
		height: 200rpx;
		display: flex;
	}

	//右侧价格
	.nuiBt_Money {
		position: absolute;
		left: 400rpx;
		top: 240rpx;
		width: 160rpx;
		height: 36rpx;
		display: flex;
		color: #E55163;
	}

	//跑腿样式
	//绿色图标样式
	.uniBt_dd1 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 60rpx;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		float: left;
	}

	//取件地址样式
	.uniBt_address1 {
		border-width: 0px;
		position: absolute;
		left: 40rpx;
		top: 64rpx;
		width: 100rpx;
		height: 28rpx;
		display: flex;
		font-size: 12px;
		color: #191919;
		float: left;
	}

	//收件地址样式
	.uniBt_address1_1 {
		border-width: 0px;
		position: absolute;
		left: 150rpx;
		top: 64rpx;
		width: 400rpx;
		height: 30rpx;
		display: flex;
		font-size: 13px;
		float: left;
	}

	//橙点样式
	.uniBt_dd2 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 140rpx;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		float: left;
	}

	//取件地址样式
	.uniBt_address2 {
		border-width: 0px;
		position: absolute;
		left: 40rpx;
		top: 144rpx;
		width: 96rpx;
		height: 28rpx;
		display: flex;
		font-size: 12px;
		color: #191919;
		float: left;
	}

	//收件地址样式
	.uniBt_address2_2 {
		border-width: 0px;
		position: absolute;
		left: 150rpx;
		top: 144rpx;
		width: 400rpx;
		height: 30rpx;
		display: flex;
		font-size: 13px;
		float: left;
	}

	//金额样式
	.nuiBt_Picer {
		border-width: 0px;
		position: absolute;
		left: 380rpx;
		top: 16rpx;
		width: 200rpx;
		height: 31px;
		display: flex;
		color: #E55163;
		font-size: 14px;
	}

	//小标题样式
	.nuiBt_title_x {
		border-width: 0px;
		position: absolute;
		left: 8rpx;
		top: 60rpx;
		width: 320rpx;
		height: 26rpx;
		display: flex;
		font-size: 11px;
	}

	//边框样式 同样
	.uni_border_xs_1 {
		border-width: 0px;
		position: absolute;
		left: -15rpx;
		top: 110rpx;
		width: 180rpx;
		height: 94rpx;
		display: flex;
		border: 1px solid #000000;
		border-radius: 14px;
	}

	.uni_border_xs_2 {
		border-width: 0px;
		position: absolute;
		left: 185rpx;
		top: 110rpx;
		width: 180rpx;
		height: 94rpx;
		display: flex;
		border: 1px solid #000000;
		border-radius: 14px;
	}

	.uni_border_xs_3 {
		border-width: 0px;
		position: absolute;
		left: 385rpx;
		top: 110rpx;
		width: 180rpx;
		height: 94rpx;
		display: flex;
		border: 1px solid #000000;
		border-radius: 14px;
	}

	//工作日期 时段 地点样式 图片样式
	.uni_border_img_1 {
		position: absolute;
		left: 15rpx;
		top: 10rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.uni_border_img_2 {
		position: absolute;
		left: 15rpx;
		top: 10rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.uni_border_img_3 {
		position: absolute;
		left: 15rpx;
		top: 10rpx;
		width: 40rpx;
		height: 40rpx;
	}

	//工作日期 时段 地点样式 文字样式
	.uni_border_text_1 {
		position: absolute;
		//left: 10rpx;
		top: 27px;
		width: 88px;
		height: 11px;
		display: flex;
		font-family: '楷体';
		font-weight: 400;
		font-style: normal;
		font-size: 12px;
		text-align: center;
		display: block;
	}

	.uni_border_text_2 {
		position: absolute;
		//left: 20rpx;
		top: 27px;
		width: 88px;
		height: 11px;
		display: flex;
		font-family: '楷体';
		font-weight: 400;
		font-style: normal;
		font-size: 12px;
		text-align: center;
		display: block;
	}

	.uni_border_text_3 {
		position: absolute;
		//left: 40rpx;
		top: 27px;
		width: 88px;
		height: 11px;
		display: flex;
		font-family: '楷体';
		font-weight: 400;
		font-style: normal;
		font-size: 12px;
		text-align: center;
		display: block;
	}

	.uni_border_rt1 {
		border-width: 0px;
		position: absolute;
		left: 32px;
		top: 9px;
		width: 50px;
		height: 11px;
		display: flex;
		font-family: '楷体';
		font-weight: 400;
		font-style: normal;
		font-size: 11px;
	}

	.uni_border_rt2 {
		border-width: 0px;
		position: absolute;
		left: 32px;
		top: 9px;
		width: 50px;
		height: 11px;
		display: flex;
		font-family: '楷体';
		font-weight: 400;
		font-style: normal;
		font-size: 11px;
	}

	.uni_border_rt3 {
		border-width: 0px;
		position: absolute;
		left: 32px;
		top: 9px;
		width: 50px;
		height: 11px;
		display: flex;
		font-family: '楷体';
		font-weight: 400;
		font-style: normal;
		font-size: 11px;
	}

	//工作内容 工作要求 

	//金额样式
	.nuiBt_Picer_3 {
		border-width: 0px;
		position: absolute;
		left: 340rpx;
		top: 16rpx;
		width: 240rpx;
		height: 31px;
		display: flex;
		color: #E55163;
		font-size: 14px;
	}
	.nuiBt_title_min{
		position: absolute;
		    font-size: 13px;
		    color: #999999;
		    top: 35px;
		    left: 5px;
	}
</style>
